<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>excel文件比较</title>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/jquery.form.js"></script>
</head>
<script type="text/javascript">
    $(function () {
        $("#commitBtn").click(function () {

            $("#commitBtn").attr("disabled",true);//设置为不可以再点击
            $("#spanId").css("display", "");

            $("#ajaxForm").ajaxSubmit(function (msg) {
                $("#commitBtn").attr("disabled",false);
                $("#spanId").css("display", "none");
                var obj = eval('(' + msg + ')');
                var resultMsg = obj.resultMsg;
                if ("SUCCESS" == resultMsg) {
                    console.log("成功");
                    var downLoadKey=obj.downKey;
                    window.location.href='/downloadFile?downLoadKey='+downLoadKey;
                }else{
                    alert("失败"+resultMsg);
                    console.log("失败");
                }

            });
            return false;
        });
    });

    function createDownForm() {
        var url="/downloadFile";
        // 构造隐藏的form表单
        var $form = $("<form id='download' style='display:none' class='formcss' method='post' target='myiframe'></form>");
        $form.attr("action",url);
        $("#form1").append($form);
        var $input = $("<input name='param3' type='submit'></input>");
        $input.attr("value","下载");
        $("#download").append($input);
        // 提交表单
        $form.submit();
    }

    function show(){
        $("#InstructionsForUse").css("display", "");
    }
    function hideShow(){
        $("#InstructionsForUse").css("display", "none");
    }
</script>
<body>
<div>
    <button onclick="show()">显示使用说明</button>    <button onclick="hideShow()">隐藏使用说明</button>
    <div id="InstructionsForUse" style="display: none">
        <h6>excel根据自定义主键比对，每一行，每一列数据</h6>
        <h6>1. 复杂关联比较。输入关联列名称，根据列名称匹配数据并比较。当两个excel乱序、条数不一致时使用。</h6>
        <span>数据分析小工具，重在实用性，非常适用于检查文件修改前后差异,作者wjrsoftware@163.com，欢迎提出宝贵的优化建议！！！</span>
    </div>

    <div>
        <form id="ajaxForm" method="POST" action="/fileUploadLocal" enctype="multipart/form-data" >
            <h3>excel表头组合关联查询，outer join</h3>
            列名称1: <input type="text" name="name">
            列名称2: <input type="text" name="name">
            列名称3: <input type="text" name="name"></br>
            列名称4: <input type="text" name="name">
            列名称5: <input type="text" name="name">
            列名称6: <input type="text" name="name"></br>
            列名称7: <input type="text" name="name">
            列名称8: <input type="text" name="name"></br>
            <h3>上传待比较excel文件</h3>
            文件1:<input type="file" title="" name="file1"/><br>
            文件2:<input type="file" title="" name="file2"/>
        </form>
        <h3>比较</h3>
        <button id="commitBtn" type="button">比较并下载比对结果</button><span id="spanId" style="display: none;color: red">处理中</span>
<!--        <h3>差异和差集颜色说明</h3>-->
<!--        <table   >-->
<!--            <thead>-->
<!--            <tr>-->
<!--                <td  align='center' >-->
<!--                    <input class="button button1"  type="button" style="background-color: #f44336; color: #e9e9e9;"  value="红色：不一致"/>-->
<!--                </td>-->
<!--                <td   align='center' >-->
<!--                    <input class="button button2" type="button" style="background-color: #EE870D; color: #e9e9e9;" value="黄色：sheet2比sheet1多的数据"/>-->
<!--                </td>-->
<!--                <td  align='center' >-->
<!--                    <input class="button button3" type="button" style="background-color: #B516EF; color: #e9e9e9;" value="粉色：sheet1比sheet2多的数据"/>-->
<!--                </td>-->
<!--                <td  align='center' >-->
<!--                    <input class="button button3" type="button" style="background-color: #6be4ef; color: #e9e9e9;" value="天蓝色：只在sheet1有的表头"/>-->
<!--                </td>-->
<!--                <td  align='center' >-->
<!--                    <input class="button button3" type="button" style="background-color: #205FDE; color: #e9e9e9;" value="蓝色：只在sheet2有的表头"/>-->
<!--                </td>-->
<!--            </tr>-->
<!--            </thead>-->
<!--        </table>-->
                <!-- 触发弹窗的按钮 -->
        <button id="showModalId1" onclick="showModal()">欢迎打赏，您的支持将是我继续前行的最大动力，感谢!</button>
        <h3>效果图片</h3>
        <br>
        <img src="/static/compareResult.png" alt="" width="1479" height="377">
        <h3>源数据1</h3>
        <img src="/static/data1.png" alt="" width="1479" height="377">
        <h3>源数据2</h3>
        <img src="/static/data2.png" alt="" width="1479" height="377">

    </div>

</div>

<iframe width=0 height=0 frameborder=0 id="myiframe" name="myiframe"></iframe>
<div>
    <!-- 模态弹窗的结构 -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <!-- 弹窗内容将被插入到这里 -->
        </div>
    </div>
</div>
</body>
<style>
    input[type="text"] {
        width: 200px;
        height: 20px;
        padding: 5px;
        font-size: 16px;
        border: 1px solid #ccc; /* 设置边框 */
        border-radius: 5px; /* 设置边框圆角 */
        background-color: #fff; /* 设置背景色 */
    }

    #commitBtn {
        margin: 20px;
        padding: 10px 20px;
        background-color: #4caf50;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    #file1 {
        margin-top: 10px;
        padding: 10px 20px;
        background-color: #f9f4f4;
        color: #584d4d;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    #file2 {
        margin-top: 10px;
        padding: 10px 20px;
        background-color: #f9f4f4;
        color: #584d4d;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

     #button_show {
        padding: 10px 15px;
        background-color: #f9f4f4;
        color: #584d4d;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
     #button_hide {
        padding: 10px 15px;
        background-color: #f9f4f4;
        color: #584d4d;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    #showModalId1 {
        margin: 20px;
        padding: 10px 20px;
        background-color: #f9f4f4;
        color: #584d4d;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

            /* 模态弹窗样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 650px; /* Could be more or less, depending on screen size */
        }

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        #closeModuleButton1 {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #closeModuleButton2 {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }


</style>

<!--弹窗的一些样式-->
<script>
         function showModal() {
        // 获取模态弹窗元素
        var modal = document.getElementById('myModal');
        // 显示模态弹窗
        modal.style.display = 'block';

        // 定义要插入弹窗的HTML内容
        var htmlContent = `
            <button id="closeModuleButton1" onclick="closeModal()">关闭弹窗</button>
            <h3 style="display: ">感谢您的陪伴与信任！如果您觉得我们的软件给您带来了价值</h3>
            <h3 style="display: ">请考虑打赏一下，您的支持将是我继续前行的最大动力,感谢!</h3>
            <table>
                <tr>
                         <img id="myImage" src="" alt="Base64 Image" width="300" height="300" border=0>
                </tr>
            </table>
            <button id="closeModuleButton2" onclick="closeModal()">关闭弹窗</button>
        `;

        // 获取弹窗内容容器并插入HTML内容
        var modalContent = modal.querySelector('.modal-content');
        modalContent.innerHTML = htmlContent;
        document.getElementById('myImage').src = base64Image;
    }

    function closeModal() {
        // 获取模态弹窗元素
        var modal = document.getElementById('myModal');
        // 隐藏模态弹窗
        modal.style.display = 'none';
    }
        const base64Image = "";

</script>


<style>

    </style>
</html>